<template>
 <div>
   <div id="pagetwo" data-role="page">
	<div class="search-info">
		<i class="icon" @click="Seach_btn"></i>
		<form  @submit.prevent="Seach_btn"><input type="search" placeholder="请输入搜索内容" data-mini="true" style="color:#565656;" autofocus="autofocus" id="search-input" v-model="goodsName"/></form>
		<router-link :to="{name:'Index'}" class="cancle-qx cancle-qx1" data-ajax="false">取消</router-link>
		<a href="javascript:void (0)" class="cancle-qx cancle-qx2" style="color: #000;display: none;">搜索</a>
	</div>
	<div class="sousuo_btn">
		<button :class="{btn_xuanzhong:Clickonthe_goods}" @click="options(1)">商品</button>
		<button :class="{btn_xuanzhong:Clickonthe_shops}" @click="options(2)">店铺</button>
	</div>
	<div class="search-content">
		<div class="history-con" v-show="history_icon">	
			<div class="top-info">
				历史搜索
				<i class="icon" @click="delt_icon"></i>
			</div>
			<ul class="list-ul" >
				<li class="list-li" v-for="item in record_jilu" :key="item.id" @click="historyName(item.historyName)">{{item.historyName}}</li>
			</ul>
		</div>
		
		<div class="guess-content" v-if="1==Seach"  v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
			<h3 class="title1" >{{test_type}}</h3>
			<div class="guess-content-in" >
				<div class="same-box" v-for="item in goods_list" :key="item.goodsId" @click="href_Commodity_details(item.goodsId)" >
					<div class="top-info">
						<img :src="item.goodsThum" class="img-info" alt="">
						<i class="icon" v-show="false"></i>
						<span v-show="false">5折</span>
					</div>
					<div class="bottom-info">
						<router-link :to="{name:'Shops'}">
						<p class="title" id="font_now">{{item.goodsName}}</p>
						<div class="price">
							<span class="quanhou" style="margin-left: -64px;">售价 <strong>￥{{item.goodsScreenPrice | amountMin100(2)}}</strong></span>
						</div>
						<div class="price" v-show="false">
							<s>原价￥196</s>
							<span class="xiaoliang">月销 524</span>
							<span class="quanhou">券后 <strong>￥98</strong></span>
							<span class="card-icon">98元券</span>
						</div>
						<div class="shop-cart " v-show="false">
							<span class="zxs">找相似</span>
							<span class="in-shop"><i class="icon"></i></span>
						</div></router-link>
					</div>
				</div>
				
			</div><loadingtmp :busy="busy" :datalength="goods_list.length" :loadall="loadall"></loadingtmp>
		</div>
		<div class="shops-content" v-else-if="2==Seach" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                <div class="shops-same-info" v-for="item in goods_list" :key="item.companyId" >
                    <router-link :to="{name:'Commodity',query:{id:item.company.companyId}}">
                        <div class="top-info">
                            <div class="img-info">
                                <img :src=item.company.headimgurl alt="">
                            </div>
                            <div class="text-content">
                                <p class="shops-title">{{item.company.companyName}}</p>
                                <div class="shops-add">
                                    <span class="text1"><i class="icon" style="margin-right:5px;"></i>{{item.company.address}}</span>
                                    <span class="text2" v-if="item.sign=='1kmdown'">| 距您{{item.distance}}米</span>
                                    <span class="text2" v-else-if="item.sign=='no sign'"></span>
                                    <span class="text2" v-else>| 距您{{item.distance}}公里</span>
                                    <div class="clix"></div>
                                </div>
                            </div>
                        </div>
                    </router-link>
                    <div class="center-info">
                        <router-link v-for="imgurl in item.goodsList" :key="imgurl.goodsId" :to="{name:'Commodity_details',query:{id:imgurl.goodsId,subid:0}}">
                            <img :src=imgurl.goodsThum alt="" :onerror="defaultImg">
                        </router-link>
                    </div>
                    <div class="bottom-info" v-for="coupons in item.coupons" :key="coupons.id" v-if="item.coupons.length>0">
                        <div class="jian">减</div>
                        <span class="txt">满{{coupons.reach1 | amountMin100(2)}}减{{coupons.score1 | amountMin100(2)}}</span>
                    </div>
                    <div class="bottom-info" v-for="coupons in item.coupons" :key="coupons.id" v-else>
                    </div>
                </div>
                <loadingtmp :busy="busy" :datalength="goods_list.length" :loadall="loadall"></loadingtmp>
            </div>
            <div class="h50"></div>
	</div>
</div>
 </div>
</template>
<style scoped>
  @import "../../assets/personal/css/index.css";
  .shops-content{
	  width: 100%;
	  height: 375px;
	  overflow: scroll;
  }
  .guess-content{
	  width: 100%;
	  height:520px;
	  overflow: scroll
  }
  .sousuo_btn button{
	 border: none;
	 background: #f2f2f2;
	 width: 40%;
	 margin: 0 4%;
  }
  .btn_xuanzhong{
	 border-bottom: 2px solid red !important;
	 color: red;
  }
  .same-box{
	  margin: 15px auto;
  }
  #font_now{
	white-space: nowrap;      /*超出的空白区域不换行*/
    overflow: hidden;         /*超出隐藏*/
    text-overflow: ellipsis;
  }
</style>
<script>
import loadingtmp from '@/components/load/loading'
export default {
    data () {
		return {
			Clickonthe_goods:true,
			Clickonthe_shops:false,
			history_icon:true,
			test_type:"推荐内容",
			Seach_type:1,//类型
			Seach:1,
			page: 1,//分页
			pageSize: 4,
			busy: false,
			loadall: false,
			goods_list:[],
			goodsName:'',
			defaultImg: 'this.src="' + require('../../assets/image_bg_url.png') + '"',
			record_jilu:[],
			record_list_length:''
		}
	},
	activated(){
		//   alert(this.$route.meta.isUseCache+"123")
			console.log(this.$route.meta.isUseCache+"进来了")
			if(!this.$route.meta.isUseCache){
				console.log("aaaaaaaa")
				this.goods_list = [];
				this.page =1;
				this.loadall =false;
				this.busy= false;
				this.loadMore();
			}
			this.$route.meta.isUseCache = false;
    },
	components: {
        loadingtmp
	},
    mounted () {
		this.record_list()
	},
	beforeRouteLeave( to, from,next){
		if (to.name == 'commodity_details') {
			to.meta.isUseCache = true;    
			console.log("进来了啊")
		}        
		next();
    },
	methods:{
	   historyName:function(text){//点击搜索历史
			this.goodsName=text;
			this.Seach_btn()
	   },
	   delt_icon:function(){
		if(this.record_list_length>0){
			if(confirm("确定删除全部历史记录吗？")){
			this.$http.delete(this.APIURL_PREFIX + "/api/wap/history",{ params:{historyType:this.Seach_type}}).then((response) => {//historyType  首页
				layer.msg("删除成功")
				this.record_list();
			}).catch(function (err) {
				console.log(err)
			});
          }
		}else{
			layer.msg("暂无历史纪录")
		}     
	   },
	   record(){//api/wap/history  历史记录
	      if(1==this.Seach_type){
			  this.$http.post(this.APIURL_PREFIX + "/api/wap/history/goods",$.param({page:1,rows:8,goodsName:this.goodsName})).then((response) => {//historyType  首页           
		      }).catch(function (err) {
				console.log(err)
		     });
		  }else{
			   this.$http.post(this.APIURL_PREFIX + "/api/wap/history/company",$.param({page:1,rows:8,companyName:this.goodsName})).then((response) => {//historyType  首页
             
		   }).catch(function (err) {
				console.log(err)
		   });
		  }
           
	   },
	   record_list(){
            this.$http.get(this.APIURL_PREFIX + "/api/wap/history",{ params:{page:1,rows:8,historyType:this.Seach_type}}).then((response) => {//historyType  首页
			  this.record_jilu=response.data.data
			  this.record_list_length=this.record_jilu.length
			  console.log(this.record_jilu.length)
		   }).catch(function (err) {
				console.log(err)
		   });
	   },
	   options:function(type){//搜索类型
		  this.Seach_type=type
		  this.record_jilu=[]
		  this.record_list()
		  if(1==this.Seach_type){//商品
			 console.log("商品")
			 this.test_type="推荐内容";
			 this.Seach=1//判断是你猜还是搜索的
			 this.page=1
			 this.goods_list=[]
			 this.Clickonthe_goods=true;
			 this.Clickonthe_shops=false;
			 this.loadMore()
		  }else{
			 console.log("店铺")
			 this.Seach=2//判断是你猜还是搜索的
			 this.page=1
			 this.goods_list=[]
			 this.Clickonthe_shops=true;
			 this.Clickonthe_goods=false;
			 this.loadMore()
		  }
	   },
	   Seach_btn:function(){//搜索商品/店铺
	       this.record()
		   this.history_icon=false;   
		   this.test_type="搜索内容"
           if(1==this.Seach_type){
			    console.log("调用搜索商品")
			    this.Seach=1//判断是推荐还是搜索的
				this.page=1;
				this.goods_list=[]
				this.loadMore()
		   }else{
			    console.log("调用搜索商品")
			    this.Seach=2
				this.page=1;
				this.goods_list=[]
				this.loadMore()
		   }
	   },
	   good(flag){
		    var params={}
		    params.page=this.page
			params.rows=this.pageSize
		  if(1==this.Seach_type){
			 var api="/api/wap/searchGoods";
			 params.goodsName=this.goodsName
		  }else{
			  console.log("2")
			  var api="/api/wap/searchCompany";
			  params.companyName=this.goodsName
		  }
          this.$http.get(this.APIURL_PREFIX + api,{ params}).then((response) => {
			if (flag) {
			  this.goods_list = this.goods_list.concat(response.data.data);
		    } else {
			  this.goods_list = response.data.data;
		    }
		   if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
			 this.busy = true;
			 this.loadall = true;
		    }
		   else {
			 this.busy = false;
		 	this.page++
	     	}
		}).catch(function (err) {
			console.log(err)
		});
				
	   },
	   loadMore() {
		this.busy = true;
		setTimeout(() => {
			this.good(this.page > 1);
		}, 500);
	  },
	   href_Commodity_details:function(goodid){//跳转
          this.$router.push({ name: 'Commodity_details',query:{id:goodid}})
      }
	},
	 watch: {	
        goodsName:function(newVal, ordVal){
           if(""==newVal){
			   console.log("进入")
			   if(1==this.Seach_type){
                  this.Seach=1;
			   }else{
				  this.Seach=2;
			   }
			   this.record_list()
			   this.goods_list=[];
			   this.history_icon=true;
			   this.test_type="推荐内容";
			   this.page=1;
			   this.loadMore()		  
		   }
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

